<template>
        <div class="SeachList-main">
        <div class="title">
            <h3>搜索结果:</h3>
        </div>
        <div class="seachList">
            <ul class="seachList-ul">
                <li class="seachList-li" v-for="(item,index) in getdata" :key="item.id">
                    <div class="img-part">
                        <img v-lazy="item.imgSrc" alt="" @touchstart="sendID(item.id,item.imgSrc,item.name,index,item.artists[0].name)">
                    </div>
                    <div class="text-part">
                        <p :class="{'active' : clickNum === index}">{{item.name}} -<span class="author">{{item.artists[0].name}}</span></p>
                    </div>
                </li>
            </ul>
            <button class="moreButton" @touchstart="moreData">
                <span v-if="!isnone">显示更多( •̀ ω •́ )✧</span>
                <span v-if="isnone">已经没有更多数据了(っ °Д °;)っ</span>
            </button>
        </div>
        <div class="logo">
            <img v-lazy="require(`@/img/logo.png`)">
        </div>
        </div>
</template>

<script>
export default {
    data(){
            return {
                clickNum : -1,
            }
    },
    methods : {
        moreData(){
            this.$parent.getMore();
        },
        sendID(id,picUrl,name,index,artists){
            if(this.clickNum !== index){
                let songUrl = null;
                axios.get(`/api/song/url?id=${id}`).then(response=>{
                    songUrl = response.data.data[0].url;
                    this.$emit("getid",{id,picUrl,name,songUrl,artists})
                })
                this.clickNum = index
            }}

    },

    props : {
        getdata : {
            type : Array
        },
        isnone : {
            type : Boolean
        }
    }
}
</script>

<style lang="scss" scoped>
    .SeachList-main {
        width: 100%;
        padding-bottom: 8rem;
    }

    .title {
        width: 100%;
        height: 2rem;
        font-size: 1.5rem;
        font-weight: bolder;
    }

    .seachList {
        width: 90%;
        margin: auto;
        position: relative;
    }

    .seachList-ul {
        width: 100%;
        height: 18rem;
        overflow-y:auto;
        &::-webkit-scrollbar {
                display: none;
        }

        .seachList-li {
            display: flex;
            width: 100%;
            height: 3rem;
            padding: 0.5rem 0rem ;
            border-bottom: 2px dashed rgb(156, 156, 156);
            color: #000;

            .active {
                color: #33CCBB;
            }
            
        }

        .img-part {
            width: 3rem;
            height: 3rem;
            border-radius: 0.5rem;
            overflow: hidden;

            >img {
                width: 100%;
            }
        }

        .text-part {
            flex: 1;
            height: 3rem;
            line-height: 3rem;
            font-size: 1rem; 
            padding-left: 0.8rem;
            box-sizing: border-box;
             overflow:hidden; //超出的文本隐藏
            text-overflow:ellipsis; //溢出用省略号显示
            white-space:nowrap; //溢出不换行

            .author {
                color: #ccc;
                font-size: 0.8rem;
            }
        }
        }
         .moreButton {
            width: 100%;
            text-align: center;
            border: none;
            background: transparent;
            padding: 0.5rem;


            &:active {
                color: #33CCBB;
            }
        }

        .logo {
            width: 100%;
            background: rgba(231, 231, 231, 0.2);
            >img {
                width: 100%;
            }
        }
</style>